<template>
	<div class="btn">
		<div class="div">
			<h2>书城管理系统</h2>
			<h5>欢迎进入书城管理系统网站</h5>
			<img :src="`http://127.0.0.1/api/public/showimg/${img}`" />
			{{uname}}
			<div class="link">
				<router-link to="/mobile/home">app端</router-link>
				<router-link to="/pc/home">pc端</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PcAdmHeader',
		data() {
			return {
				img: '',
				uname: '',
			}
		},
		created() {
			console.log(this.$store.state);
			this.img = this.$store.state.img;
			this.uname = this.$store.state.name;
		}
	}
</script>

<style scoped>
	.link a {
		color: white;
		margin-right: 25px;
	}

	.btn {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.div {
		background-color: #2C3E50;
		color: white;
		height: 5vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.div h2 {
		margin-left: 3vw;
		color: #009688;
	}

	.div h5 {

		color: white;
		font-size: 20px;
	}

	.div h4 {
		color: white;
		font-size: 20px;
	}

	.div h3 {
		color: white;
		font-size: 20px;
	}

	.div h6 {
		color: white;
		font-size: 20px;
	}

	.div img {
		width: 2vw;
		height: 2vw;
		border-radius: 10vw;
	}

	.div2 {
		display: flex;
	}

	.div3 {
		width: 20%;
		height: 45vw;
		background-color: #393d49;
	}

	.div3 h3 {
		color: white;
		margin-left: 3vw;
		margin-bottom: 3vw;
	}

	.div4 {
		width: 80%;
		margin-left: 3vw;
		background-color: white;
	}

	.div4 h3 {
		margin-top: 2vw;
	}

	.but {
		border: none;
		background-color: #009688;
		color: white;
		width: 9vw;
		height: 2vw;
		border-radius: 4px;
		margin-top: 1vw;
	}

	.butt {
		border: none;
		background-color: #009688;
		color: white;
		width: 3vw;
		height: 2vw;
		border-radius: 4px;
		margin-top: 1vw;
	}

	.but1 {
		background-color: #5fb878;
		border: none;
		color: white;
		border-radius: 2vw;
		width: 6vw;
		height: 2vw;
	}

	.but2 {
		background-color: #1e9fff;
		border: none;
		color: white;
		width: 6vw;
		height: 2vw;
	}

	.btu3 {
		background-color: #ff5722;
		border: none;
		color: white;
		width: 6vw;
		height: 2vw;
		margin-left: 1vw;
	}

	.div4 table {
		width: 100%;
		margin-top: 2vw;
		text-align: center;
		border-color: #e8e8e8;
	}

	.div4 table tr th {
		background-color: #f2f2f2;
	}

	.div5 {
		display: flex;
	}

	.div5 button {
		border: none;
		background-color: #009688;
		color: white;
		width: 3vw;
		height: 2vw;
		border-radius: 4px;
		margin-top: 1.5vw;
		margin-left: 60vw;
	}

	.div5 h3 {
		color: #b3b3b3;
	}

	.div5 h4 {
		margin-top: 2vw;
		font-size: 20px;
	}

	.switch {
		position: relative;
		display: inline-block;
		width: 60px;
		height: 34px;
	}

	.switch input[type="checkbox"] {
		opacity: 0;
		width: 0;
		height: 0;
	}

	.switch label {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ff5722;
		border-radius: 34px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.switch input[type="checkbox"]:checked+label {
		background-color: #2196F3;
	}

	.switch label:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 30%;
		transform: translate(-50%, -50%);
		width: 26px;
		height: 26px;
		background-color: #fff;
		border-radius: 50%;
		transition: transform 0.3s ease;
	}

	.switch input[type="checkbox"]:checked+label:before {
		transform: translate(-50%, -50%) translateX(28px);
	}

	select {
		width: 13vw;
		height: 2vw;
		font-size: 16px;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 5px;
	}
</style>